import { createRouter, createWebHashHistory } from 'vue-router'

import store from '@/store'
import { menuTree } from '@/apis/personal'

import Layout from '@/layout/index.vue'
// const Home =  ()=>import("@/views/Home.vue")

//页面
const Login = () => import('@/views/login/index.vue')
const PersonalIndex = () => import('@/views/personal/index.vue')
const PersonalMessage = () => import('@/views/personal/Message.vue')

const NotFound = () => import('@/views/404.vue')

//应用管理
const AppDept = () => import("@/views/app/Dept.vue")
const AppResource = () => import("@/views/app/Resource.vue")
const AppRole = () => import("@/views/app/Role.vue")
const AppIndex = () => import("@/views/app/index.vue")

//系统管理
const SysUser = () => import("@/views/sys/User.vue")
const SysNotice = () => import("@/views/sys/Notice.vue")

//审计管理
const LogsVisit = () => import("@/views/logs/Visit.vue")
const LogsOperation = () => import("@/views/logs/Operation.vue")


const routeConfig = [
  {
    path: '/',
    name: 'Home',
    component: Layout,
    children: [
      {
        path: 'login',
        name: 'login',
        component: Login
      },
      {
        path: 'personal',
        name: 'Personal',
        component: PersonalIndex,
        children: [
          {
            path: 'message',
            name: 'PersonalMessage',
            component: PersonalMessage
          }
        ]
      },
      //应用管理的路由
      {
        path: '/app',
        name: 'App',
        children: [
          {
            path: 'user',
            name: 'AppIndex',
            component: AppIndex
          },
          {
            path: 'dept',
            name: 'AppDept',
            component: AppDept
          },
          {
            path: 'role',
            name: 'AppRole',
            component: AppRole
          },
          {
            path: 'resource',
            name: 'AppResource',
            component: AppResource
          },
        ]
      },
      //系统管理的路由
      {
        path: '/sys',
        name: 'Sys',
        children: [
          {
            path: 'user',
            name: 'SysUser',
            component: SysUser
          },
          {
            path: 'notice',
            name: 'SysNotice',
            component: SysNotice
          }
        ]
      },
      //审计管理的路由
      {
        path: '/logs',
        name: 'Logs',
        children: [
          {
            path: 'visit',
            name: 'LogsVisit',
            component: LogsVisit
          },
          {
            path: 'operation',
            name: 'LogsOperation',
            component: LogsOperation
          }
        ]
      },
      {
        path: '404',
        name: 'NotFound',
        component: NotFound
      }
    ]
  },
  // {
  //   path: '/:pathMatch(.*)*',
  //   name: '404',
  //   redirect: '/404'
  // }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes: routeConfig
})
router.beforeEach(async (to) => {
  const isLogin = store.getters['user/isLogin']
  if (to.path === '/login') {
    if (isLogin) {
      console.log(store.state.firstRoute);
      return store.state.firstRoute
    }
    return true
  }
  if (store.state.routeLoaded) {
    return true
  }

  await initMenu()
  const { state: { firstRoute } } = store
  if (to.path === '/' && firstRoute) {
    return firstRoute
  }
  return true
})

function initMenu() {
  return menuTree()
    .then((res) => {
      const { data } = res
      console.log('res===========',res);
      store.commit('setRouteLoaded', true)

      store.commit('setMenuTree', data)

      store.commit('setFirstRoute', data[0].children[0].path)
    })
}


export default router
